<template>
  <div>
    <Breadcrumb style="padding-bottom: 20px">
      <BreadcrumbItem to="/">图书管理后台</BreadcrumbItem>
      <BreadcrumbItem>图书信息</BreadcrumbItem>
    </Breadcrumb>
    <Modal :model-value="addData" title="添加类型" footer-hide :closable="false">
      <Form :model="addForm" :label-width="80">
        <FormItem label="类型:">
          <input v-model="addForm.type" placeholder="类型" style="width: 80%" />
        </FormItem>
      </Form>
      <div class="demo-form-button">
        <Button type="primary" @click="add()">添加</Button>
        <Button type="primary" style="margin-left: 20px" @click="cancel()">取消</Button>
      </div>
    </Modal>
    <div class="demo-search">
      <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="name">
          <Input type="text" v-model="formInline.name" placeholder="类型名">
            <template #prepend>
              <Icon type="ios-person-outline"></Icon>
            </template>
          </Input>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')">查询</Button>
          <Button type="primary" @click="resetting()" style="margin-left: 20px">重置</Button>
          <Button type="primary" @click="addButton()" style="margin-left: 20px">添加</Button>
        </FormItem>
      </Form>
    </div>
    <Table border :columns="columns" :data="data"></Table>
  </div>
</template>
<script>
import { resolveComponent } from 'vue';
import { selectTypeAll, deleteType, insertType, selectForType } from '@/api/typeApi';

export default {
  data() {
    return {
      addData: false,
      addForm: {
        name: ''
      },
      columns: [
        {
          title: 'ID',
          key: 'id',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.id)
            ]);
          }
        },
        {
          title: '类型',
          key: 'type',
          align: 'center'
        },
        {
          title: 'Action',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                resolveComponent('Button'),
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  onClick: () => {
                    this.remove(params.row);
                  }
                },
                {
                  default() {
                    return '删除';
                  }
                }
              )
            ]);
          }
        }
      ],
      data: [
        {
          id: '1',
          type: '历史'
        }
      ],
      formInline: {
        type: ''
      },
      ruleInline: {
        name: [{ required: true, message: '请输入类型名', trigger: 'blur' }]
      }
    };
  },
  methods: {
    addButton() {
      this.addData = true;
    },
    resetting() {
      selectTypeAll({}).then((res) => {
        this.data = res;
      });
      this.formInline.name = '';
    },
    add() {
      insertType(this.addForm).then((res) => {
        if (res) {
          this.$Message.success('新增成功');
          window.setTimeout(function () {
            window.location.reload();
          }, 1000);
        }
      });
      this.addData = false;
    },
    cancel() {
      this.addData = false;
    },
    remove(type) {
      console.log(type);
      this.$Modal.confirm({
        title: '删除',
        content: '你确定要删除此类型吗?',
        onOk: () => {
          deleteType(type).then((res) => {
            if (!res) {
              this.$Message.error('存着此类型的书,无法删除此类型');
            } else {
              this.$Message.success('删除成功');
              window.setTimeout(function () {
                window.location.reload();
              }, 1000);
            }
          });
        },
        onCancel: () => {
          this.$Message.info('取消删除');
        }
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          selectForType({ type: this.formInline.name }).then((res) => {
            this.data = res;
          });
          this.$Message.success('查询成功');
        } else {
          this.$Message.error('查询失败');
        }
      });
    }
  },
  created() {
    selectTypeAll({}).then((res) => {
      this.data = res;
    });
  }
};
</script>

<style>
.demo-search {
  text-align: center;
}
.demo-form-button {
  text-align: center;
}
</style>
